<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathBox - Empty Example.</title>

  <!--
    This example is good for starting from.
  -->

  <script type="text/javascript" charset="utf-8" src="../vendor/domready.js"></script>
  <script type="text/javascript" charset="utf-8" src="../build/MathBox-bundle.js"></script>

  <script type="text/javascript">
    DomReady.ready(function () {
      if (location.href.match(/^file:/)) {
        document.getElementById('info').style.opacity = 1;
        document.getElementById('info').innerHTML = "Sorry. This example does not work when accessed using file://. Please use an http:// host and try again.";
      }
    });
  </script>

  <script type="text/javascript">

  function mathboxSetup() {
    // Viewport camera/setup
    mathbox
      // Cartesian viewport
      .viewport({
        type: 'cartesian',
        range: [[-3, 3], [-2, 2], [-1, 1]],
        scale: [1.5, 1, 1],
      })
      .camera({
        orbit: 3.5,
        phi: τ/4,
        theta: 0,
      })
      .transition(300)
  }

  var mathboxScript = [
    // Steps go here
    /*
    ['add', 'curve', {
      id: 'my-curve',
      domain: [-3, 3],
      expression: function (x, i) {
        return [x, Math.sin(x), 0];
      },
      // ...
    }, {
      delay: 500,
      duration: 300,
    }],
    */
  ];

  </script>

  <script type="text/javascript">
  /**
   * Bootstrap
   */
  DomReady.ready(function() {
    ThreeBox.preload([
      '../shaders/snippets.glsl.html',
    ], function () {

      // MathBox boilerplate
      var mathbox = window.mathbox = mathBox({
        cameraControls: true,
        cursor:         true,
        controlClass:   ThreeBox.OrbitControls,
        elementResize:  true,
        fullscreen:     true,
        screenshot:     true,
        stats:          false,
        scale:          1,
      }).start();

      // Set up director
      var script = window.mathboxScript;
      var director = window.director = new MathBox.Director(mathbox, script);

      // Arrow controls
      // Controls for stand-alone
      window.addEventListener('touchstart', function (e) {
        director.forward();
        document.getElementById('info').style.opacity = '0';
      });
      window.addEventListener('keydown', function (e) {
        if (e.keyCode == 38 || e.keyCode == 37) director.back();
        else if (e.keyCode == 40 || e.keyCode == 39) director.forward();
        else {
          return;
        }

        document.getElementById('info').style.opacity = '0';
      });

      window.mathboxSetup(mathbox);

    });
  });
  </script>

  <link href="base.css" rel="stylesheet" type="text/css" media="screen">

</head>
<body>
  <div id="info"></div>
</body>
</html>
